<template>
	<section class="double-slider">
		<mu-slider ref="start" :value="start" :step="step" :max="max" :min="min" class="start" @change="startChange"/>
		<mu-slider ref="end" :value="end" :step="step" :max="max" :min="min" class="end" @change="endChange"/>
	</section>
 
</template>

<script>
	export default {
		components:{
		},
		props:{
			step:{
				default:1
			},
			min:{
				default:0
			},
			max:{
				default:100
			},
			start:{
				default:0
			},
			end:{
				default:100
			},
			minLength:{
				default:10
			}
		},
		methods:{
			startChange(value){
				if(value>=this.end-this.minLength){
					let slider=this.$refs.start
					slider.handleBlur()
					slider.handleMouseUp()
					slider.handleTouchEnd()
					value=this.end-this.minLength
					slider.inputValue=value
				}
				this.$emit('change',value,this.end)
			},
			endChange(value){
				if(value<=this.start+this.minLength){
				let slider=this.$refs.end
					slider.handleBlur()
					slider.handleMouseUp()
					slider.handleTouchEnd()
					value=this.start+this.minLength
					slider.inputValue=value
				}
				this.$emit('change',this.start,value)
			}
		}
	}
</script>

<style lang="scss">
@import "../scss/variables.scss";
	.double-slider{
		position:relative;
		width:100%;
		height:$spaceBig;
		.mu-slider{
			position:absolute;
			width:100%;
			left:0;
			top:0;
			&.start .mu-slider-fill{
				background-color:#bdbdbd;
				z-index:3;
			}
			.mu-slider-thumb{
				z-index:5;
			}
		}
	}
</style>